<template>
	<view class="technician-income-index" v-if="isLoad">
		<view @tap.stop="$util.goUrl({url:`/user/pages/cash-out?type=technician`})" class="mine-menu-list c-base"
			:style="{background:primaryColor}">
			<view class="space-lg"></view>
			<view class="space-lg"></view>
			<view class="flex-center f-caption mt-sm">可提现金额(元)</view>
			<view class="money-info flex-center flex-y-baseline mt-sm mb-sm">¥<view class="money">
					{{detail.cap_cash}}
				</view>
			</view>
			<view class="flex-center pt-md pb-md f-caption c-base-rgba">每月提现不限次数</view>
			<view class="cash-out-btn flex-center fill-base f-paragraph radius" :style="{color: primaryColor}">提现
			</view>
			<view class="space-lg"></view>
			<view class="space-lg"></view>
		</view>
		<view class="money-count fill-base flex-center pt-md pb-md">
			<view class="item-child flex-center flex-column">
				<view class="flex-y-baseline f-md-title mb-sm">{{detail.extract_total_price}}</view>
				<view class="f-caption c-caption">总收入(元)</view>
			</view>
			<view class="item-child flex-center flex-column b-1px-l">
				<view class="flex-y-baseline f-md-title mb-sm">{{detail.no_received}}</view>
				<view class="f-caption c-caption">未入账(元)</view>
			</view>
		</view>
		<view @tap.stop="$util.goUrl({url:`/user/pages/distribution/record?type=2`})"
			class="flex-between mt-md pt-lg pb-lg pl-lg pr-md fill-base">
			<view class="f-title c-title">提现记录</view>
			<view class="flex-y-center f-paragraph c-title">
				<view class="c-warning" v-if="detail.extract_ing_price*1>0">提现中 {{detail.extract_ing_price}}元</view>
				<i class="iconfont icon-right ml-sm"></i>
			</view>
		</view>
		
		<view class="wrap">
			<view class="wrap-title">
				收益记录
			</view>
			<view class="wrap-list u-border-top">
				<block v-for="(item,index) in list" :key="index">
					<view class="wrap-item">
						<image class="file" :src="item.gift.show_file"></image>
						
						<view class="right">
							<view class="top">
								<view class="name">{{item.user_name}}送{{item.gift_name}}</view>
								<view class="num">x{{item.gift_number}}</view>
							</view>
							
							<view class="bottom">
								<view class="time">{{item.createtime}}</view>
								
								<view class="price">¥{{item.price}}</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		totalIncome
	} from "@/api/newLive.js";
	import {
		mapState,
		mapMutations
	} from "vuex"
	import tabbar from "@/components/tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				detail: {},
				isLoad: false,
				
				page: 1,
				total: 0,
				list:[],
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			commonOptions: state => state.user.commonOptions,
			userInfo: state => state.user.userInfo,
		}),
		onLoad() {
			this.initIndex()
			this.getLiveIncomeList()
		},
		onUnload() {
			this.$util.back()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++
				this.getLiveIncomeList()
			}
		},
		methods: {
			...mapMutations([]),
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				
				this.$util.showLoading()
				this.detail = await this.$api.technician.capCashInfo()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.isLoad = true
				this.$util.hideAll()
			},
			initRefresh() {
				this.initIndex(true)
			},
			
			
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1
				this.list = []
				
				this.getLiveIncomeList()
			},
			/**
			 * 直播收益
			 */
			getLiveIncomeList() {
				totalIncome(this.page, "", 1).then(res => {
					this.total = res.data.list.total
					this.count = res.data.count
					this.money = res.data.money
					
					let list = res.data.list.data
					if (this.page == 1) {
						this.list = list
					} else {
						this.list = this.list.concat(list)
					}
				})
			},
		}
	}
</script>


<style lang="scss">
	.technician-income-index {

		.mine-menu-list {
			.money-info {
				font-size: 50rpx;

				.money {
					font-size: 70rpx;
				}
			}

			.cash-out-btn {
				width: 169rpx;
				height: 56rpx;
				margin: 0 auto;
			}

			.menu-title {
				height: 90rpx;

				.iconfont {
					font-size: 24rpx;
				}
			}

			.item-child {
				width: 25%;
				margin: 10rpx 0;

				.iconfont {
					font-size: 46rpx;
				}
			}


		}


		.money-count {
			.item-child {
				width: 50%;
			}
		}

	}
	
	.wrap {
		margin-top: 20rpx;
		width: 100%;
		background-color: white;
		
		.wrap-title {
			padding: 30rpx 20rpx;
			width: 100%;
			overflow: hidden;
			color: #333;
			font-size: 29rpx;
		}
		.wrap-list {
			width: 100%;
			padding: 30rpx;
			overflow: hidden;
			
			.wrap-item {
				width: 100%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 40rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.file {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}
				
				.right {
					margin-left: 20rpx;
					flex: 1;
					min-height: 120rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					
					.top {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						overflow: hidden;
						
						.name {
							color: #333;
							font-size: 30rpx;
						}
						
						.num {
							color: #666;
							font-size: 28rpx;
						}
					}
					
					.bottom {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						overflow: hidden;
						
						.price {
							color: #f00;
							font-size: 30rpx;
						}
						
						.time {
							color: #999;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>
